<template>
	<view class="bg-ff pd20">
		<!-- 时间筛选 -->
		<view class="date-box">
			<view class="date-tools df df-warp">
				<view class="left">
					<view @tap="prevWeek('pre')">上一周</view>
					<uni-datetime-picker
						type="date"
						@change="changeMonth($event)"
					>
						<text class="label"
							>{{
								`${dayjs(this.selectDate).format(
									'YYYY'
								)}年${dayjs(this.selectDate).format('MM')}`
							}}月</text
						>
					</uni-datetime-picker>
					<view @tap="nextWeek('next')">下一周</view>
				</view>
				<view class="right">
					<view
						v-for="(item, index) in timeArr"
						class="flex-1"
						@tap="getDateType(item)"
						:class="item.type === currentDateType ? 'active' : ''"
						:key="index"
						>{{ item.name }}</view
					>
				</view>
			</view>
			<view class="calendar">
				<view class="header">
					<view class="week-list">
						<text v-for="item in weekList" :key="item">{{
							item
						}}</text>
					</view>
				</view>
				<view class="calendarRef calendar_comp_wrap" ref="calendarRef">
					<view
						class="calendar_comp_section"
						:style="{
							transform: `translateX(${-moveIndex * 100}%)`,
							transitionDuration: `${current.isTouch ? 0 : 0.3}s`,
						}"
					>
						<view
							v-for="(item, index) in weekDateList"
							:key="index"
							class="calendar_list_day"
							:style="{
								transform: `translateX(${
									(index -
										1 +
										moveIndex +
										(current.isTouch ? touch.x : 0)) *
									100
								}%)`,
							}"
						>
							<view
								class="date_text"
								:style="{
									color: isOtherMonthDay(date)
										? '#333333'
										: '#CCCCCC',
								}"
								v-for="(date, key) in item"
								:key="key"
								@tap="
									handleSelectDate(
										date.format('YYYY-MM-DD'),
										key
									)
								"
							>
								<text
									:class="
										renderClassName(date)
											? 'selectDay'
											: '#CCCCCC'
									"
									>{{ date.format('DD') }}</text
								>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="f36 g6 df ac jsa top-filter">
				<view
					class="flex-1 lh80 df ac jsc"
					:class="item.checked ? 'g4' : ''"
					v-for="(item, index) in filterArr"
					:key="index"
					@tap="openFilter(item)"
				>
					<view class="w80 text-over tc">{{ item.name }}</view>
					<text
						class="triangle mt10 ml10"
						:class="item.checked ? 'bottom-act' : 'bottom-def'"
						v-if="item.type !== 'complaint'"
					></text>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="title f34 g3"
				>未完成（{{ unFinishScheduleList.length }}）</view
			>
			<view
				v-for="(item, index) in unFinishScheduleList"
				:key="index"
				class="task-item df pd10 mb10"
			>
				<view class="time fw500">
					<view class="fw500" v-if="item.dateType === 1">全天</view>
					<view class="fw500 time" v-else>
						<text class="">{{ item.scheduleStartTime }}</text>
						<text class="">~</text>
						<text class="">{{ item.scheduleEndTime }}</text>
					</view>
				</view>
				<view class="flex-1 ml20" style="min-width: 0">
					<view class="f34 lh40 mb20 fw500 text-over">{{
						item.scheduleContent
							? item.scheduleContent
							: item.voiceDTOS[0].voiceText
					}}</view>
					<view class="f30">
						<label
							class="mr20 label"
							:class="
								item.schedulePriority == 1
									? 'normal'
									: item.schedulePriority == 2
									? 'important'
									: 'danger'
							"
						>
							{{
								item.schedulePriority == 1
									? '普通'
									: item.schedulePriority == 2
									? '重要'
									: '紧急'
							}}
						</label>
						<label
							class="mr20 label"
							:class="
								item.scheduleType == 1
									? 'label1'
									: item.scheduleType == 2
									? 'label2'
									: 'label3'
							"
						>
							{{
								item.scheduleType == 1
									? '事件'
									: item.scheduleType == 2
									? '协同'
									: '例行'
							}}
						</label>
						<label class="label normal mr20">{{
							renderText(item.scheduleLabelId)
						}}</label>
					</view>
				</view>
				<view class="operate ml20 df ac jsc fdc">
					<button
						class="btn primary-button mb20"
						@tap="goDetails(item)"
					>
						详情
					</button>
					<button
						class="btn primary-button"
						v-if="item.userId === item.belongUserId && item.id"
						@tap="complete(item)"
					>
						完成
					</button>
				</view>
			</view>
			<diy-empty v-if="unFinishScheduleList.length === 0"></diy-empty>
		</view>
		<view class="finished" :class="isMountView ? 'pushHei' : 'pullHei'">
			<view class="pull-text df">
				<text class="f34"
					>已完成（{{ finishScheduleList.length }}）</text
				>
				<view class="right-pull f34" @tap="openView()">{{
					isMountView ? '查看>' : '收起'
				}}</view>
			</view>
			<view class="pd10 finished-content">
				<view
					v-for="(item, index) in finishScheduleList"
					:key="index"
					class="task-item df pd10 mb10"
				>
					<view class="time">
						<view class="fw500" v-if="item.dateType === 1"
							>全天</view
						>
						<view class="fw500 time" v-else>
							<text class="">{{ item.scheduleStartTime }}</text>
							<text class="">~</text>
							<text class="">{{ item.scheduleEndTime }}</text>
						</view>
					</view>
					<view class="flex-1 ml20" style="min-width: 0">
						<view class="f34 lh40 mb20 text-over">{{
							item.scheduleContent
								? item.scheduleContent
								: item.voiceDTOS[0].voiceText
						}}</view>
						<view class="f30">
							<label class="mr20 finished_normal">{{
								item.schedulePriority == 1
									? '普通'
									: item.schedulePriority == 2
									? '重要'
									: '紧急'
							}}</label>
							<label class="mr20 finished_normal">{{
								item.scheduleType == 1
									? '事件'
									: item.scheduleType == 2
									? '协同'
									: '例行'
							}}</label>
							<label class="mr20 finished_normal">{{
								renderText(item.scheduleLabelId)
							}}</label>
						</view>
					</view>
					<view class="operate ml20 df ac jsc" @tap="goDetails(item)"
						><button class="btn primary-button">详情</button></view
					>
				</view>
			</view>
		</view>
		<!--筛选下拉框-->
		<uni-popup ref="popup">
			<view class="content-item">
				<view v-if="contentTypeVal === 'level'" class="df ac flw">
					<view
						class="mr20 time-item"
						v-for="item in levelList"
						:key="item.value"
						@tap="selectValue('level', item)"
						:class="item.checked ? 'active-time' : ''"
					>
						{{ item.value }}
					</view>
				</view>
				<view v-if="contentTypeVal === 'type'" class="df ac flw">
					<view
						class="mr20 time-item"
						v-for="item in typeList"
						:key="item.value"
						@tap="selectValue('type', item)"
						:class="item.checked ? 'active-time' : ''"
					>
						{{ item.value }}
					</view>
				</view>
				<view class="df ac mt20">
					<button class="default-button btn w40" @tap="reset">
						重置
					</button>
					<button class="primary-button btn w40" @tap="handleSearch">
						确定
					</button>
				</view>
			</view>
		</uni-popup>
		<view class="bottom-button-bd" @tap="add" style="z-index: 5"
			><button class="primary-button w90">增加日程</button></view
		>
		<operateComplete ref="operateCompleteRef" @complete="getList" />
	</view>
</template>

<script>
import operateComplete from './components/operateCompletion/operateCompletion.vue'
import {
	getCurrentDay,
	formatDate,
	generateWeekData,
	generateMonthData,
	handelFormtDate,
} from '@/common/utils.js'
const dayjs = require('@/common/dayjs.min.js')
export default {
	components: {
		operateComplete,
	},
	props: {
		refresh: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			dayjs,
			currentDateType: 'date',
			isMountView: true,
			selectDate: dayjs().format('YYYY-MM-DD'),
			current: {
				currentDate: dayjs().format('YYYY-MM-DD'), //获取今日
				isTouch: false, //控制滑动动画
				touchStartX: 0,
				touchStartY: 0,
			},
			actions: [],
			showPopover: false,
			moveIndex: 0,
			touch: {
				x: 0,
				y: 0,
			},
			timeArr: [
				{
					type: 'date',
					name: '天',
				},
				{
					type: 'week',
					name: '周',
				},
				{
					type: 'month',
					name: '月',
				},
			],
			weekList: ['日', '一', '二', '三', '四', '五', '六'],
			finishScheduleList: [],
			unFinishScheduleList: [],
			filterArr: [
				{
					type: 'level',
					name: '优先级',
					checked: false,
				},
				{
					type: 'type',
					name: '类型',
					checked: false,
				},
			],
			levelList: [],
			typeList: [],
			contentTypeVal: '',
			chooseDate: '',
		}
	},

	methods: {
		changeMonth(e) {
			const formtDate = handelFormtDate(e, 'YYYY-MM-DD')
			this.selectDate = formtDate
			const {
				currentMonthFirstDay,
				currentMonthLastDay,
				generateMonthDateList = [],
			} = generateMonthData(dayjs(e))
			const {
				currenWeekFirstDay,
				currenWeekLastDay,
				generateWeekDateList = [],
			} = generateWeekData(dayjs(e))
			this.updateWeekView(
				this.moveIndex--,
				currenWeekFirstDay,
				currenWeekLastDay,
				generateWeekDateList
			)
			this.getList()
		},
		getList() {
			let levelIdArr = this.levelList
				.filter((item) => item.checked)
				.map((item) => {
					return item.key
				})

			let typeIdArr = this.typeList
				.filter((item) => item.checked)
				.map((item) => {
					return item.key
				})
			this.$request
				.request('carer-platform/work/log/schedule/listSchedule', {
					header: {
						userId: uni.getStorageSync('userId'),
					},
					method: 'post',
					data: {
						orgId: uni.getStorageSync('orgId'),
						startDate: this.selectDate,
						endDate: this.selectDate,
						schedulePriority: levelIdArr,
						scheduleType: typeIdArr,
					},
				})
				.then((res) => {
					let { unFinishScheduleList, finishScheduleList } =
						res.data[0]
					this.unFinishScheduleList = unFinishScheduleList
					this.finishScheduleList = finishScheduleList
				})
		},
		//打开筛选框
		openFilter(row) {
			this.filterArr.forEach((item) => {
				item.checked = false
				if (row.type === item.type) {
					item.checked = true
				}
			})
			this.contentTypeVal = row.type
			this.$refs.popup.open('top')
		},
		openView() {
			this.isMountView = !this.isMountView
		},
		// 日历选中逻辑
		handleSelectDate(time, index) {
			const formtDate = handelFormtDate(time, 'YYYY-MM-DD')
			this.selectDate = formtDate
			this.getList()
		},
		renderText(id) {
			let notice = {
				0: '不通知',
				1: '提前5分钟',
				2: '提前15分钟',
				3: '提前30分钟',
			}
			let label = {
				1: '工作',
				2: '学习',
				3: '会议',
				4: '备忘',
			}
			let type = 'label'
			switch (type) {
				case 'notice':
					return notice[this.details.noticeType]
				case 'label':
					return label[id]
			}
		},
		//获取角色
		getType(data) {
			// return 'important'
		},
		prevWeek() {
			this.moveIndex--
			const nextWeekFirstDay = this.weekFirstDay['subtract'](1, 'week')
			const {
				currenWeekFirstDay = null,
				currenWeekLastDay = null,
				generateWeekDateList = [],
			} = generateWeekData(nextWeekFirstDay)
			this.updateWeekView(
				this.moveIndex,
				currenWeekFirstDay,
				currenWeekLastDay,
				generateWeekDateList
			)
		},
		nextWeek() {
			this.moveIndex++
			const nextWeekFirstDay = this.weekFirstDay['add'](1, 'week')
			// console.log(nextWeekFirstDay)
			const {
				currenWeekFirstDay = null,
				currenWeekLastDay = null,
				generateWeekDateList = [],
			} = generateWeekData(nextWeekFirstDay)

			this.updateWeekView(
				this.moveIndex,
				currenWeekFirstDay,
				currenWeekLastDay,
				generateWeekDateList
			)
		},
		//更新周日历
		updateWeekView(index, currentFistDay, currenWeekLastDay, dateList) {
			this.moveIndex = index
			this.weekFirstDay = currentFistDay
			this.weekLastDay = currenWeekLastDay
			this.weekDateList = dateList
			console.log(dateList)
		},
		//获取当前月份
		getTime() {},
		// 周切换日期
		weekChange(type) {},
		//选择日期
		dateChange() {},
		//选择日期展示维度
		getDateType(item) {
			this.currentDateType = item.type
		},
		add() {
			uni.navigateTo({
				url: `/subPackagesLog/pages/workLog/aditionLog?date=${this.selectDate}`,
			})
		},
		// 选中日期
		renderClassName(date) {
			let formtDate = handelFormtDate(date, 'YYYY-MM-DD')
			if (this.selectDate === formtDate) return true
			return false
			// if (formtDate === this.current.currentDate) return 'currentDay'
			// return ''
		},
		// 进入详情
		goDetails(item) {
			if (item.scheduleType === 3 || item.scheduleStatus === 3) {
				uni.navigateTo({
					url: `/subPackagesLog/pages/workLog/workLogDetail?id=${item.id}&templateId=${item.templateId}&scheduleStandardDate=${item.scheduleStandardDate}`,
				})
			} else if (item.userId !== item.belongUserId) {
				uni.navigateTo({
					url: `/subPackagesLog/pages/workLog/workLogDetail?id=${item.id}&templateId=${item.templateId}&scheduleStandardDate=${item.scheduleStandardDate}`,
				})
			} else {
				uni.navigateTo({
					url: `/subPackagesLog/pages/workLog/aditionLog?id=${item.id}&templateId=${item.templateId}&date=${item.scheduleStandardDate}`,
				})
			}
		},
		//完成
		complete(data) {
			this.$refs.operateCompleteRef.init(data)
		},
		isOtherMonthDay(date) {
			const isOtherMonthDay = date.isSame(this.mounthFirstDay, 'month')
			return isOtherMonthDay
		},
		selectValue(type, data) {
			// console.log(type, data)
			if (type === 'level') {
				let index = this.levelList.findIndex(
					(item) => item.key == data.key
				)
				this.levelList[index].checked = !this.levelList[index].checked
			} else {
				let index = this.typeList.findIndex(
					(item) => item.key == data.key
				)
				this.typeList[index].checked = !this.typeList[index].checked
			}
		},
		handleSearch() {
			this.$refs.popup.close()
			this.getList()
		},
		reset() {
			this.dataList = []
			let list = [1, 2]
			list.map((item) => {
				this.getLabel(item)
			})
			this.getList()
			this.$refs.popup.close()
		},
		//获取标签
		getLabel(id) {
			this.$request
				.request('carer-platform/work/log/schedule/scheduleEnum', {
					method: 'post',
					data: { type: id },
				})
				.then((res) => {
					let { data } = res
					if (data && data.length) {
						data.map((item) => {
							item.checked = false
						})
						let arr = []
						switch (id) {
							case 1:
								this.levelList = data
								break
							case 2:
								this.typeList = data
								break
						}
					}
				})
		},
	},
	created() {
		let date = dayjs(this.current.currentDate)

		const {
			currentMonthFirstDay,
			currentMonthLastDay,
			generateMonthDateList = [],
		} = generateMonthData(date)
		const {
			currenWeekFirstDay,
			currenWeekLastDay,
			generateWeekDateList = [],
		} = generateWeekData(date)
		this.mounthFirstDay = currentMonthFirstDay
		this.mounthLastDay = currentMonthLastDay
		this.mountDateList = generateMonthDateList
		this.weekFirstDay = currenWeekFirstDay
		this.weekLastDay = currenWeekLastDay
		this.weekDateList = generateWeekDateList
		this.getList()
		let list = [1, 2]
		list.map((item) => {
			this.getLabel(item)
		})
	},
}
</script>

<style lang="scss" scoped>
.date-box {
	position: fixed;
	width: 100%;
	top: 100rpx;
	left: 0;
	z-index: 99;
	padding: 0 20rpx;
	box-sizing: border-box;
	background-color: #fff;
}
.date-tools {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
	.left {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		text {
			margin: 0 10rpx;
		}
		view {
			padding: 10rpx 15rpx;
			background-color: #dcdff0;
			color: $primary-color;
			border-radius: 10rpx;
		}
	}
	.right {
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		border-radius: 8rpx;
		border: 2rpx solid $primary-color;
		text-align: center;
		view {
			color: $primary-color;
			&:not(:last-child) {
				border-right: 2rpx solid $primary-color;
			}
			&.active {
				color: #fff;
				background-color: $primary-color;
			}
		}
	}
}
.week-list {
	display: flex;
	text {
		width: calc(100% / 7);
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 15px;
		font-family:
			PingFangSC-Regular,
			PingFang SC;
		color: #999999;
	}
}
.add {
	position: fixed;
	bottom: 20rpx;
	left: 0;
	border-radius: 0;
	width: 100%;
}
.content {
	padding-bottom: 220rpx;
	padding-top: 270rpx;
	box-sizing: border-box;
	.title {
		font-weight: 600;
		line-height: 80rpx;
		height: 80rpx;
	}
}
.finished {
	position: fixed;
	bottom: 130rpx;
	left: 0;
	width: 100%;
	color: #999999;
	background-color: #fff;
	&.pullHei {
		height: 500rpx;
		transition: 0.25s;
	}
	&.pushHei {
		height: 80rpx;
		transition: 0.15s;
	}
	.pull-text {
		color: #999999;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		padding: 0 20rpx;
		justify-content: space-between;
		background-color: #efefef;
	}
}
.finished-content {
	height: 400rpx;
	overflow-y: auto;
}
.label {
	display: inline-block;
	border-radius: 4rpx;
	padding: 4rpx 10rpx;
	margin: 0 5rpx;
}
.task-item {
	border: 2rpx solid #cccccc;
	border-radius: 8rpx;
	.time {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text {
			line-height: 30rpx;
			&:nth-child(2) {
				line-height: 40rpx;
			}
		}
	}
	.btn {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 34rpx;
	}
}

.finished_normal {
	border: 2rpx solid #cccccc;
	color: #cccccc;
	padding: 4rpx 10rpx;
	border-radius: 4rpx;
}

.calendar_comp_wrap {
	width: 100%;
	height: 80rpx;
	position: relative;
	// &.pullHei {
	// 	height: 280px;
	// 	transition: 0.25s;
	// }
	// &.pushHei {
	// 	height: 50px;
	// 	transition: 0.15s;
	// }
	.calendar_comp_section {
		width: 100%;
		display: flex;
		background: #fff;
		.calendar_list_day {
			display: flex;
			flex-wrap: wrap;
			padding-top: 16rpx;
			flex-shrink: 0;
			width: 100%;
			background: #fff;
			position: absolute;
			.date_text {
				position: relative;
				margin-bottom: 30rpx;
				width: calc(100% / 7);
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				// border: 1px solid red;
				font-size: 32rpx;
				font-family:
					PingFangSC-Medium,
					PingFang SC;
				font-weight: 500;
				color: #333333;
				// border: 1px solid red;
				text {
					width: 60rpx;
					// height: 60rpx;
					display: inline-block;
				}
				.currentDay {
					background: rgba(255, 142, 34, 0.1) !important;
					color: #ff8e22 !important;
					padding: 12rpx 20rpx;
					border-radius: 16rpx;
				}
				.dot {
					position: absolute;
					bottom: 0px;
					left: 50%;
					width: 5px;
					height: 5px;
					border-radius: 50%;
					// font-size: 1px;
					background: red;
				}
				.selectDay {
					// border-radius: 8px;
					border-radius: 50%;
					background: $primary-color !important;
					color: #ffffff !important;
					// padding: 12rpx;
					&.selectDayActive {
						padding: 6px 18px;
					}
				}

				.circle {
					display: block;
					width: 8px;
					height: 8px;
					background: #ccc;
					border-radius: 50%;
					margin: 0 auto;
					margin-top: 10px;
				}
			}
		}
	}
}
.content-item {
	margin-top: 100rpx;
	padding: 30rpx 20rpx 50rpx 20rpx;
	background: #fff;
}
.time-item {
	border: 2rpx solid $primary-color;
	color: $primary-color;
	font-size: 36rpx;
	margin: 10rpx 15rpx 10rpx 0;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
}
.active-time {
	color: #fff;
	background-color: $primary-color;
	border: 2rpx solid $primary-color;
}
.normal {
	color: $primary-color !important;
	border: 2rpx solid $primary-color !important;
}
.important {
	color: #eeb571 !important;
	border: 2rpx solid #eeb571 !important;
}
.danger {
	color: #d6837c !important;
	border: 2rpx solid #d6837c !important;
}

.label1 {
	color: #81b337 !important;
	border: 2rpx solid #81b337 !important;
}
.label2 {
	color: #ebb8bd !important;
	border: 2rpx solid #ebb8bd !important;
}
.label3 {
	color: $primary-color !important;
	border: 2rpx solid $primary-color !important;
}
</style>
